<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>任务队列</title>
</head>
<style type="text/css">
    body {
        font: normal 11px auto Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
        color: #4f6b72;
        background: #E6EAE9;
    }

    a {
        color: #c75f3e;
    }

    #mytable {
        width: 1000px;
        padding: 0;
        margin: 0;
    }

    caption {
        padding: 0 0 5px 0;
        width: 90%;
        font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        text-align: right;
    }

    th {
        font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        color: #4f6b72;
        border-right: 1px solid #C1DAD7;
        border-bottom: 1px solid #C1DAD7;
        border-top: 1px solid #C1DAD7;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-align: left;
        padding: 6px 6px 6px 12px;
        background: #CAE8EA no-repeat;
    }

    th.nobg {
        border-top: 0;
        border-left: 0;
        border-right: 1px solid #C1DAD7;
        background: none;
    }

    td {
        border-right: 1px solid #C1DAD7;
        border-bottom: 1px solid #C1DAD7;
        background: #fff;
        font-size: 11px;
        padding: 6px 6px 6px 12px;
        color: #4f6b72;
    }


    td.alt {
        background: #F5FAFA;
        color: #797268;
    }

    th.spec {
        border-left: 1px solid #C1DAD7;
        border-top: 0;
        background: #fff no-repeat;
        font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    }

    th.specalt {
        border-left: 1px solid #C1DAD7;
        border-top: 0;
        background: #f5fafa no-repeat;
        font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        color: #797268;
    }

    /*---------for IE 5.x bug*/
    html > body td {
        font-size: 11px;
    }

    body, td, th {
        font-family: 宋体, Arial;
        font-size: 12px;
    }

    div {
        float: left;
    }

    .hide{
        display:none;
    }
    .modal{
        position:fixed;
        left:50%;
        top:50%;
        width:300px;
        height:280px;
        margin-left:-200px;
        margin-top:-250px;
        z-index:10;
        background-color:white;
    }
    .shade{
        position:fixed;
        left:0;
        right:0;
        top:0;
        bottom:0;
        opacity:0.6;
        background-color:black;
        z-index:9;
    }
    p{
        text-align:center;
    }

    .required {
        color: red;
    }
</style>
<body>
<form id="taskQueueForm" name="taskQueueForm">
<table>
    <tr>
        <td>任务编码:</td>
        <td>
            <input id="taskCode" name="taskCode" list="taskCodeDataList">
            <datalist id="taskCodeDataList">
            </datalist>
        </td>
        <td>关联单号:</td>
        <td>
            <input id="billCode" name="billCode" type="text">
        </td>
        <td><span class="required">*</span>任务状态:</td>
        <td>
            <select id="state" name="state">
                <option value="0">初始化</option>
                <option value="2" selected="selected">失败</option>
                <option value="1">已完成</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><span class="required">*</span>开始时间:</td>
        <td>
            <input id="startTime" name="startTime" type="datetime-local">
        </td>
        <td><span class="required">*</span>结束时间:</td>
        <td>
            <input id="endTime" name="endTime" type="datetime-local">
        </td>
        <td>任务队列名:</td>
        <td>
            <input id="taskQueueName" name="taskQueueName" list="taskQueueNameList">
            <datalist id="taskQueueNameList">
            </datalist>
        </td>
    </tr>
    <tr>
        <td colspan="5">
            <button id="btnQuery" type="button">查询</button>
            <button id="btnReset" type="button">重置</button>
            <button id="btnExecute" type="button">执行</button>
            <span style="padding-left: 10px">每页最多显示20条数据</span>
            <span style="padding-left: 10px; font-weight: bold">[执行]操作是重置任务状态</span>
        </td>
        <td>
            <button id="btnInsert" type="button">添加任务</button>
        </td>
    </tr>
</table>
</form>
<div>
    <table cellspacing="0">
        <caption></caption>
        <tr>
            <th><input id="checkAll" type="checkbox"></th>
            <th scope="col">编号</th>
            <th scope="col">任务编码</th>
            <th scope="col">关联单号</th>
            <th scope="col" width="200">任务参数</th>
            <th scope="col">状态</th>
            <th scope="col">执行次数</th>
            <th scope="col">uuid</th>
            <th scope="col">最早执行时间</th>
            <th scope="col">创建时间</th>
            <th scope="col" width="60">操作</th>
        </tr>
        <tbody id="tableBody"></tbody>
    </table>
</div>

<div class="modal hide">
    <table cellspacing="0" style="width:98%;height: 98%;">
        <caption></caption>
        <tr>
            <td colspan="2" align="center">
                [添加/编辑]任务
                <input id="insert_taskId" type="hidden">
            </td>
        </tr>
        <tr>
            <td><span class="required">*</span>任务编码</td>
            <td>
                <input id="insert_taskCode" type="text" list="taskCodeDataList">
            </td>
        </tr>
        <tr>
            <td><span class="required">*</span>任务参数</td>
            <td><textarea id="insert_taskParam" style="width: 98%;height: 98%;"></textarea></td>
        </tr>
        <tr id="insert_executeTime_tr">
            <td>执行时间</td>
            <td><input id="insert_executeTime" type="datetime-local"></td>
        </tr>
        <tr id="insert_billCode_tr">
            <td>关联单号</td>
            <td><input id="insert_billCode" type="text"></td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input id="insert_taskQueueName" type="hidden">
                <input id="btnSave" type="button" value="保存">
                <input id="btnCancel" type="button" value="取消">
            </td>
        </tr>
    </table>
</div>
<div class="shade hide"></div>
<div class="container">
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</html>
<script type="text/javascript">
    let taskMap = {};

    $(document).ready(function () {
        loadConfigs();

        $("#btnQuery").click(function () {
            loadTaskQueue();
        });

        $("#btnReset").click(function () {
            $("#taskQueueForm")[0].reset();
        });

        $("#btnExecute").click(function () {
            let ids = [];
            $("input[name='checkbox_task']:checkbox:checked").each(function(){
                ids.push($(this).attr("taskId"));
            });
            if(ids.length == 0){
                alert("请选择要执行的任务");
                return;
            }
            executeTaskBatch(ids);
        });

        $("#checkAll").click(function () {
            let isCheckedAll = $(this).is(':checked');

            $("input[type='checkbox'][name='checkbox_task']").prop("checked", isCheckedAll);
        });

        $("#btnInsert").click(function () {
            showModel();
        });

        $('#btnSave').click(function(){
            insertTask();
        });

        $('#btnCancel').click(function(){
            hideModel();
        });
    });

    function loadConfigs() {
        $.getJSON("status?action=listConfig", function (result) {
            if (result && result.data) {
                $.each(result.data.taskCodes, function (index, code) {
                    $("#taskCodeDataList").append("<option value='" + code + "'>");
                });
                $.each(result.data.taskQueueNames, function (index, code) {
                    $("#taskQueueNameList").append("<option value='" + code + "'>");
                });
                if(result.data.taskQueueNames.length > 0){
                  $("#taskQueueName").val(result.data.taskQueueNames[0]);
                }
            }
        });
    }

    function loadTaskQueue() {
        let taskCode = $.trim($("#taskCode").val());
        let billCode = $.trim($("#billCode").val());
        let startTime = $.trim($("#startTime").val());
        let endTime = $.trim($("#endTime").val());
        let state = $("#state").val();
        let taskQueueName = $.trim($("#taskQueueName").val());

        // if(taskCode == ""){
        //     alert("请选择或输入任务编码");
        //     return;
        // }

        if(state == null || state == ""){
            alert("请选择任务状态");
            return;
        }

        if(startTime == null || startTime == ""){
            alert("请输入开始时间")
            return;
        }

        if(endTime == null || endTime == ""){
            alert("请输入结束时间")
            return;
        }

        var param = {
            "taskCode": taskCode,
            "billCode": billCode,
            "startTime": startTime.replace(/-/g,'/').replace('T',' '),
            "endTime": endTime.replace(/-/g,'/').replace('T',' '),
            "state": state,
            "taskQueueName": taskQueueName
        };

        $("#tableBody").html("");
        taskMap = {};

        $.getJSON("status?action=listTaskQueue", param,
            function (result) {
                if (result && result.success) {
                    if(result.data.length > 0){
                        let body = [];
                        $.each(result.data, function (index, task) {
                            taskMap[task.id + ""] = task;

                            let checkboxTd = task.state == 2 ? "<input id='checkbox_" + task.id +"' name='checkbox_task' type='checkbox' taskId='" + task.id + "'/>" : "";
                            let executeTd = task.state == 2
                                ? "<a href='javascript:void(0)' onclick=\"executeTask('" + task.id + "')\">执行</a>"
                                + "<a style='padding-left: 5px' href='javascript:void(0)' onclick=\"editTask('" + task.id + "')\">编辑</a>"
                                : "";
                            let tr = "<tr>" +
                                "        <td class='row'>" + checkboxTd + "</td>" +
                                "        <td class='row'>" + task.id + "</td>" +
                                "        <td class='row'>" + task.taskCode + "</td>" +
                                "        <td class='row'>" + task.billCode + "</td>" +
                                "        <td class='row'><textarea readonly='readonly' style='width: 98%; height: 98%'>" + task.taskParam + "</textarea></td>" +
                                "        <td class='row'>" + task.state + "</td>" +
                                "        <td class='row'>" + task.callCount + "</td>" +
                                "        <td class='row'>" + task.uuid + "</td>" +
                                "        <td class='row'>" + task.earliestExecuteTimeStr + "</td>" +
                                "        <td class='row'>" + task.createDateStr + "</td>" +
                                "        <td class='row'>" + executeTd + "</td>" +
                                "    </tr>";
                            body.push(tr);
                        })

                        $("#tableBody").html(body.join(""));
                    }else{
                        let tr = "<tr><td colspan='11' align='center'>暂无数据</td></tr>";
                        $("#tableBody").html(tr);
                    }
                }else{
                    alert(result.msg)
                }
            }
        );
    }

    function executeTask(id) {
        executeTaskBatch([id]);
    }

    function executeTaskBatch(ids) {
        let idStr = ids.join(",");
        $.post("status?action=execute", {"ids" : idStr, "taskQueueName" : $("#taskQueueName").val()},
            function (result) {
                if (result && result.success) {
                    alert("执行成功");
                    loadTaskQueue();
                }else{
                    alert(result.msg)
                }
            }
        );
    }

    function editTask(id) {
        let task = taskMap[id + ""];

        $('#insert_taskId').val(id);
        $('#insert_taskCode').val(task.taskCode);
        $('#insert_taskParam').val(task.taskParam);
        $('#insert_taskQueueName').val(task.taskQueueName);

        $("#insert_executeTime_tr").hide();
        $("#insert_billCode_tr").hide();

        showModel();
    }

    function showModel() {
        $('.hide').removeClass('hide');
    }

    function hideModel() {
        $('#insert_taskId').val('');
        $('#insert_taskCode').val('');
        $('#insert_taskParam').val('');
        $('#insert_billCode').val('');
        $('#insert_executeTime').val('');
        $('#insert_taskQueueName').val('');

        $("#insert_executeTime_tr").show();
        $("#insert_billCode_tr").show();

        $('.modal,.shade').addClass('hide');
    }

    function insertTask() {
        let taskId = $.trim($('#insert_taskId').val());
        let taskCode = $.trim($('#insert_taskCode').val());
        let taskParam = $.trim($('#insert_taskParam').val());
        let billCode = $.trim($('#insert_billCode').val());
        let executeTime = $.trim($('#insert_executeTime').val());
        let taskQueueName = $.trim($('#insert_taskQueueName').val());

        if(taskCode == null || taskCode == ""){
            alert("请输入任务编码");
            return;
        }

        if(taskParam == null || taskParam == ""){
            alert("请输入任务参数");
            return;
        }

        let param = {
            "taskId": taskId,
            "taskCode": taskCode,
            "taskParam": taskParam,
            "billCode": billCode,
            "executeTime": executeTime.replace(/-/g,'/').replace('T',' '),
            "taskQueueName": taskQueueName
        };

        $.post("status?action=editTask", param,
            function (result) {
                if (result && result.success) {
                    alert(result.msg);
                    hideModel();
                    loadTaskQueue();
                }else{
                    alert(result.msg);
                }
            }
        );
    }

</script>